<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8" />
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    a {
      text-decoration: none;
      color: #721c24;
    }

    h1 {
      text-align: center;
      color: #333;
      margin: 20px 0;
    }

    table {
      margin: 0 auto;
      width: 800px;
      border-collapse: collapse;
      color: #004085;
    }

    th {
      padding: 10px;
      background: #cfe5ff;

      font-size: 20px;
      font-weight: 400;
    }

    td,
    th {
      border: 1px solid #b8daff;
    }

    td {
      padding: 10px;
      color: #666;
      text-align: center;
      font-size: 16px;
    }

    tbody tr {
      background: #fff;
    }

    tbody tr:hover {
      background: #e1ecf8;
    }

    .info {
      width: 900px;
      margin: 50px auto;
      text-align: center;
    }

    .info input {
      width: 80px;
      height: 25px;
      outline: none;
      border-radius: 5px;
      border: 1px solid #b8daff;
      padding-left: 5px;
    }

    .info button {
      width: 60px;
      height: 25px;
      background-color: #004085;
      outline: none;
      border: 0;
      color: #fff;
      cursor: pointer;
      border-radius: 5px;
    }

    .info .age {
      width: 50px;
    }
  </style>
</head>

<body>
  <h1>新增人员</h1>
  <form action="">
    <div class="info">
      姓名：<input type="text" class="uname" /> 年龄：<input type="text" class="age" />
      性别:
      <select name="gender" id="" class="gender">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
      工资：<input type="text" class="salary" /> 城市：<select name="city" id="" class="city">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
        <option value="曹县">曹县</option>
      </select>
      <button class="add">录入</button>
    </div>
  </form>

  <h1>工资风云榜</h1>
  <table>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>城市</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
            <!--
          模板数据
          <tr>
            <td>stuId</td>
            <td>uname</td>
            <td>age</td>
            <td>gender</td>
            <td>salary</td>
            <td>city</td>
            <td>
              <button class="up" data-id= "stuId">上移</button>
              <button class="down" data-id= "stuId">下移</button>
              <button class="delete" data-id= "stuId">删除</button>
            </td>
          </tr>
       -->
    </tbody>
  </table>
  <script>
    //准备好数据后端的数据
    let arr = [{
        stuId: 1001,
        uname: "冯诺依曼",
        age: 19,
        gender: "男",
        salary: "20000",
        city: "纽约"
      },
      {
        stuId: 1002,
        uname: "秦始皇",
        age: 65,
        gender: "男",
        salary: "infinte",
        city: "秦国"
      }
      ,
      {
        stuId: 1003,
        uname: "罗辑",
        age: 23,
        gender: "男",
        salary: "20000",
        city: "北京"
      },
      {
        stuId: 1004,
        uname: "丁仪",
        age: 36,
        gender: "男",
        salary: "35000",
        city: "北京"
      }
    ]











    
   
  </script>
</body>

</html>